<template>
    <div class="statistics">
        <div class="card" style="background-color: #8FCFD1">
            <div class="card-content">
                <div class="image">
                    <img :src="money" alt="">
                </div>
                <div class="text">
                    <div class="amount">￥34522</div>
                    <div class="description">今日销售总额</div>
                </div>
            </div>
        </div>
        <div class="card" style="background-color: #FAD961">
            <div class="card-content">
                <div class="image">
                    <img :src="cart" alt="">
                </div>
                <div class="text">
                    <div class="amount">￥452212</div>
                    <div class="description">今日订单量</div>
                </div>
            </div>
        </div>
        <div class="card" style="background-color: #E15258">
            <div class="card-content">
                <div class="image">
                    <img :src="comment" alt="">
                </div>
                <div class="text">
                    <div class="amount">￥4522</div>
                    <div class="description">今日评论数</div>
                </div>
            </div>
        </div>
        <div class="card" style="background-color: #6495ED">
            <div class="card-content">
                <div class="image">
                    <img :src="see" alt="">
                </div>
                <div class="text">
                    <div class="amount">￥4522</div>
                    <div class="description">今日访问量</div>
                </div>
            </div>
        </div>
    </div>
    <div class="chart-container">
        <div class="chart-left" ref="orderChart"></div>
        <div class="chart-right" ref="salesChart"></div>
    </div>
    <el-card class="notice-card" shadow="never">
        <div class="notice-title">最新消息</div>
        <div class="notice_box">
            <div class="box_item">
                <img :src="xiaoxi" alt="" />
                <div>通知测试</div>
            </div>
            <div class="box_item">
                <img :src="xiaoxi" alt="" />
                <div>重要通知</div>
            </div>
            <div class="box_item">
                <img :src="xiaoxi" alt="" />
                <div>重大事件</div>
            </div>
        </div>
    </el-card>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import money from '@/assets/images/money.png'
import cart from '@/assets/images/cart.png'
import see from '@/assets/images/see.png'
import comment from '@/assets/images/comment.png'
import xiaoxi from '@/assets/images/xiaoxi.png'
const orderChart = ref(null);
const salesChart = ref(null);
onMounted(() => {
    const chartInstance = echarts.init(orderChart.value);

    const data = [
        { date: '08-01', amount: 100 },
        { date: '08-02', amount: 150 },
        { date: '08-03', amount: 120 },
        { date: '08-04', amount: 180 },
    ];

    const xAxisData = data.map(item => item.date);
    const yAxisData = data.map(item => item.amount);

    const option = {
        title: {
            text: '订单统计'
        },
        xAxis: {
            type: 'category',
            data: xAxisData
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            type: 'line',
            data: yAxisData
        }]
    };

    chartInstance.setOption(option);
});


onMounted(() => {
    const chartInstance = echarts.init(salesChart.value);

    const data = [
        { date: '08-01', amount: 100 },
        { date: '08-02', amount: 150 },
        { date: '08-03', amount: 120 },
        { date: '08-04', amount: 180 },
    ];

    const xAxisData = data.map(item => item.date);
    const yAxisData = data.map(item => item.amount);

    const option = {
        title: {
            text: '销售统计'
        },
        xAxis: {
            type: 'category',
            data: xAxisData
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            type: 'line',
            data: yAxisData
        }]
    };

    chartInstance.setOption(option);
});
</script>

<style>
.notice-card {
    margin: 0 0 2% 2%;
}

.notice_box {
    display: flex;
    flex-direction: column;
}

.notice-title {
    font-size: 15px;
    font-weight: 800;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid rgb(187, 187, 187);
}

.box_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 垂直居中对齐 */
    padding-top: 6px;
}

.box_item img {
    width: 10px;
    height: 10px;
}

.box_item div {
    line-height: 10px;
    font-size: 13px;
    font-weight: 500;
}

.box_item img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.chart-container {
    display: flex;
    margin: 20px 20px 0 20px;
}

.chart-left,
.chart-right {
    width: 50%;
    height: 240px;
}

.statistics {
    display: flex;
    justify-content: space-between;
    margin: 2%;
}

.card {
    width: 23%;
    padding: 20px;
    color: #fff;
}

.card-content {
    display: flex;
    align-items: center;
}

.image img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
}

.amount {
    font-size: 28px;
    font-weight: bold;
}

.description {
    font-size: 12px;
    margin: 10px 0 0 20px;
}
</style>
  